<template>
    <div class="socket-container">
        <h3>WebSocket调试</h3>
        <p>需要执行yarn socket开始本地websocket服务</p>
        <input placeholder="请输入要发出的内容" v-model="value" />
        <div class="action">
            <button @click="send">发送</button>
            <button @click="close">暂停</button>
            <button @click="start">重新连接</button>
        </div>
        <p>{{ socketData }}</p>
    </div>
</template>

<script>
// websocket引入建议使用mixin,方便其他地方公用
import SocketMixin from '../mixin/websocket'
export default {
    data() {
        return {
            value: '',
        }
    },
    mixins: [SocketMixin],
    methods: {
        send() {
            this.socketSend(this.value)
        },
        close() {
            this.closeSocket()
        },
        start() {
            this.startSocket()
        }
    },
}
</script>

<style>

</style>
<style lang="less" scoped>
    .socket-container {
        h3, p {
            text-align: center;
            padding: 10px 0px;
        }
        input {
            display: block;
            margin: 0 auto;
            border-radius: 4px;
            width: 94%;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            padding: 0px 10px;
            border: 1px solid #f1f1f1;
        }
        .action {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            button {
                width: 100px;
                height: 40px;
                line-height: 40px;
                outline: none;
                text-align: center;
                border-radius: 6px;
                color: #fff;
                cursor: pointer;
            }
            >button:nth-of-type(1) {
                background-color: rgb(51, 114, 209);
            }
            >button:nth-of-type(2) {
                background-color: rgb(228, 31, 5);
            }
            >button:nth-of-type(3) {
                background-color: rgb(5, 87, 36);
            }
        }
        
    }
</style>

